<template>
	<view>
		<view class="l_tit">
			<view class="main_tit" :class="{'main_tit_ac':activityTab==item.type}" v-for="item,i in titList"
				@click="changTitTab(item.type)" :key="item.type">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="d_box">
			<uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
		</view>

		<view class="a_content">
			<view class="a_all">
				<view class="a_tit">合计：<text>{{total_money}}</text></view>
				<view class="m_day" v-if="activityTab==1">
					<text class="m_time" :class="{'is_c':type==2}" @click="changTypeStatus(2)">已补贴</text>
					<text class="m_time" :class="{'is_c':type==1}" @click="changTypeStatus(1)">待补贴</text>
				</view>
			</view>
			<view class="a_list">
				<view class="a_item" v-for="item in list" :key="item.orderid">
					<view class="flex_between a_top">
						<view class="a_l_title" v-if="activityTab==1">消费补贴</view>
						<view class="a_l_title" v-if="activityTab==2">佣金奖励</view>
						<view class="a_l_title" v-if="activityTab==3">红包收入</view>
						<view class="a_money" v-if="activityTab!=1">{{item.sendmoney||item.money}}</view>
						<view class="a_money" v-if="activityTab==1&&type==1">{{item.unpaid_money}}</view>
						<view class="a_money" v-if="activityTab==1&&type==2">{{item.show_money}}</view>
					</view>
					<view class="a_tip" v-if="item.ordersn&&activityTab==1&&type==1">订单编号：{{item.ordersn}}</view>
					<view class="a_tip flex_between" v-if="type==2||activityTab!=1">
						<text>到账时间：{{item.show_time}}</text>
					</view>
					<view class="a_tip flex_between" v-if="type==1&&activityTab==1">
						<text>订单时间：{{item.show_time}}</text>
						<view @click="orderDetails(item.orderid)">查看已补贴明细 ></view>
					</view>
				</view>
			</view>
			<view class="empty_loading2">
				<image v-if="isloading" src="@/pages/groupbuy/static/loading.gif"></image>
				<view v-if="isempty">———— <text>没有更多了</text> ————</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titList: [{
						name: '消费补贴',
						type: 1
					},
					{
						name: '佣金奖励',
						type: 2
					},
					{
						name: '红包收入',
						type: 3
					}
				],
				activityTab: 1,
				isloading: false,
				isempty: false,
				list: [],
				page: 0,
				total_money: '', //合计
				range: '',
				type: 1,
				start_date: '',
				end_date: ''
			};
		},
		onLoad(options) {
			if (options.type) {
				this.activityTab = options.type;
			}
			this.init();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			orderDetails(val) {
				uni.navigateTo({
					url: '/pages/user/lineUp?id=' + val
				})
				console.log('11111111111', val);
			},
			changTypeStatus(val) {
				if (val == this.type) return
				this.type = val
				this.init()
			},
			init() {
				this.range = ''
				this.start_date = ''
				this.end_date = ''
				this.page = 0
				this.list = []
				this.getList()
			},
			changTitTab(i) {
				if (i == this.activityTab) return;
				this.activityTab = i;
				this.init();
			},
			getList() {
				this.page++;
				let url = ''
				if (this.activityTab == 1) {
					if (this.type == 2) {
						url = 'UserStatistics/al_sub_lst'
					} else {
						url = 'UserStatistics/un_sub_lst'
					}
				}
				if (this.activityTab == 2) {
					url = 'UserStatistics/com_lst'
				}
				if (this.activityTab == 3) {
					url = 'UserStatistics/red_lst'
				}
				this.isloading = true;
				this.isempty = false;
				const id = this.activityTab;
				this.$axios(url, 'POST', 'pt', {
					page: this.page,
					start_date: this.start_date,
					end_date: this.end_date
				}).then(res => {
					this.isloading = false;
					if (id != this.activityTab) {
						return;
					}
					if (res.data.code == 200) {
						this.total_money = res.data.data.total_money
						const newList = res.data.data.list
						this.list = [...this.list, ...newList];
						this.isempty = newList.length <= 0;
						console.log('this.list????', this.list);
					}
				})
			},
			maskClick(e) {
				this.start_date = e[0]
				this.end_date = e[1]
				this.page = 0
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fdf8ff;
	}

	::v-deep .uni-calendar-item--before-checked,
	::v-deep .uni-calendar-item--after-checked,
	::v-deep .uni-datetime-picker--btn {
		background-color: #8813E2 !important;
	}

	::v-deep .selected-item-active {
		border-bottom: 2px solid #8813E2;
	}
	::v-deep .uni-calendar-item--today{
		background-color: #8813E2 !important;
	}

	.d_box {
		margin-top: 90rpx;
		padding: 20rpx;
	}

	.a_content {
		padding: 20rpx;

		.a_all {
			display: flex;
			justify-content: space-between;

		}

		.m_day {
			width: 308rpx;
			height: 56rpx;
			background: #F5F3F7;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;

			.m_time {
				width: 132rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				color: #5B5B5B;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				line-height: 48rpx;
				background: #F5F3F7;
			}

			.is_c {
				background-color: #fff;
				color: #13001E;
			}
		}

		.a_tit {
			color: #13001E;
			font-weight: bold;
			position: relative;
			padding-left: 12rpx;

			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 8rpx;
				width: 4rpx;
				height: 24rpx;
				background: #9A1FE8;
				left: 0;
			}

			text {
				color: #9A1FE8;
			}
		}

		.a_list {
			.a_item {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;
				line-height: 50rpx;

				.a_l_title {
					color: #13001E;
					font-weight: bold;
				}

				.a_money {
					color: #9A1FE8;
					font-weight: bold;
				}

				.a_tip {
					color: #5B5B5B;
					font-size: 24rpx;
				}
			}
		}
	}

	.l_tit {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		padding: 24rpx 0;
		position: fixed;
		width: 100%;
		background: #fff;
		top: 0;
		z-index: 90;

		.main_tit {
			display: inline-block;
			position: relative;

			text {
				font-weight: bold;
				color: #13001E;
				font-size: 28rpx;
			}
		}

		.main_tit_ac {
			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 2rpx;
				width: 100rpx;
				height: 12rpx;
				background: linear-gradient(90deg, #B62BF0 0%, #8813E2 100%);
				opacity: .8;
			}
		}
	}
</style>